<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover">
      <h1 class="banner-title">{{ schoolData.name }}</h1>
    </div>

    <div style=" animation: main 1s;
    max-width: 1500px;
    padding: 50px 40px;
    margin: 380px auto 40px auto;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>招生简章</span>
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </div>
            <div class="text item">
              <el-table :show-header="true" :data="dataList" height="36.5vh" style="width: 60vw" @row-click="articleDetails">
                <el-table-column prop="id" label="id" v-if="false"/>
                <el-table-column prop="articleTitle" label="标题" :show-overflow-tooltip="true"/>
                <el-table-column width="170" prop="createTime" label="创建时间"/>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>信息发布</span>
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </div>
            <div class="text item">
              <el-table :show-header="true" :data="dataList" height="36.5vh" style="width: 60vw" @row-click="articleDetails">
                <el-table-column prop="id" label="id" v-if="false"/>
                <el-table-column prop="articleTitle" label="标题" :show-overflow-tooltip="true"/>
                <el-table-column width="170" prop="createTime" label="创建时间"/>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>网报公告</span>
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </div>
            <div class="text item">
              <el-table :show-header="true" :data="dataList" height="36.5vh" style="width: 60vw" @row-click="articleDetails">
                <el-table-column prop="id" label="id" v-if="false"/>
                <el-table-column prop="articleTitle" label="标题" :show-overflow-tooltip="true"/>
                <el-table-column width="170" prop="createTime" label="创建时间"/>
              </el-table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>调剂方法</span>
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </div>
            <div class="text item">
              <el-table :show-header="true" :data="dataList" height="36.5vh" style="width: 60vw" @row-click="articleDetails">
                <el-table-column prop="id" label="id" v-if="false"/>
                <el-table-column prop="articleTitle" label="标题" :show-overflow-tooltip="true"/>
                <el-table-column width="170" prop="createTime" label="创建时间"/>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getSchoolMsg();
    this.getArticles()
  },
  data() {
    return {
      schoolData: {},
      dataList: [{
        createTime: 1
      }],
    }
        ;
  },
  methods: {
    getSchoolMsg() {
      this.axios.get("/api/school/list", {
        params: {
          id: this.$route.params.schoolId,
        }
      }).then(({data}) => {
        this.schoolData = data.data.recordList[0];
      });
    },
    getArticles() {
      this.axios.get("/api/articles", {
        params: {}
      }).then(({data}) => {
        this.dataList = data.data;
      });
    },
    articleDetails(row){
      this.$router.push({ path: "/articles/" + row.id });
    }
  },
  computed: {
    blogInfo() {
      return this.$store.state.blogInfo;
    },
    cover() {
      var cover = this.schoolData.img;
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 600px;
}
.el-row {
  margin-bottom: 20px;
}
</style>